
import { Component } from 'react';

class Eagle extends Component {
    state = { 
        name: '鹰',
        age: 1
    }
    constructor(props){
        super(props);
        this.update = this.update.bind(this);
    }
    static getDerivedStateFromProps(props, state){
        console.log( '[Eagle] static getDerivedStateFromProps' );
        console.log( '\tprops: ' , props );
        console.log( '\tstate: ' , state );
        return { name: props.name } ;
    }
    shouldComponentUpdate(nextProps, nextState){
        console.log( '[Eagle] shouldComponentUpdate');
        console.log( '\tnextProps: ' , nextProps );
        console.log( '\tnextState: ' , nextState );
        return true;
    }
    render(){
        return (
            <div className="eagle">
                { this.state.name }
                <p>
                    <button onClick={ this.update }>更新</button>
                </p>
            </div>
        )
    }
    getSnapshotBeforeUpdate(prevProps, prevState){
        console.log( '[Eagle] getSnapshotBeforeUpdate');
        console.log( '\tprevProps: ' , prevProps );
        console.log( '\tprevState: ' , prevState );
        return null;
    }
    componentDidUpdate(prevProps, prevState, snapshot){
        console.log( '[Eagle] componentDidUpdate');
    }
    update(evt){
        this.setState( { name: '老鹰' , age: 10 } );
    }
}

export default Eagle;